<template>
  <div>
    <!-- 店铺基本信息 -->
    <van-cell-group>
      <van-field
        v-model="name"
        label="店铺名称"
        :disabled="nameEditable"
        @blur="nameEdit"
      >
        <i
          class="fa fa-pencil-square-o"
          aria-hidden="true"
          slot="right-icon"
          @click="nameEditable = !nameEditable"
        ></i>
      </van-field>
      <van-field
        v-model="address"
        label="店铺地址"
        rows="2"
        type="textarea"
        :disabled="addressEditable"
        @blur="addressEdit"
      >
        <i
          class="fa fa-pencil-square-o"
          aria-hidden="true"
          slot="right-icon"
          @click="addressEditable = !addressEditable"
        ></i>
      </van-field>
      <van-field
        v-model="info"
        label="店铺介绍"
        rows="3"
        type="textarea"
        :disabled="infoEditable"
        @blur="infoEdit"
      >
        <i
          class="fa fa-pencil-square-o"
          aria-hidden="true"
          slot="right-icon"
          @click="infoEditable = !infoEditable"
        ></i>
      </van-field>
      <van-field
        v-model="phone"
        label="联系电话"
        :disabled="phoneEditable"
        @blur="phoneEdit"
      >
        <i
          class="fa fa-pencil-square-o"
          aria-hidden="true"
          slot="right-icon"
          @click="phoneEditable = !phoneEditable"
        ></i>
      </van-field>
    </van-cell-group>
    <!-- 商品选项按钮 -->
    <van-grid style="margin-top: 40px;" :column-num="2">
      <van-grid-item icon="shop-o" text="我的商店" @click="onShopClick" />
      <van-grid-item icon="records" text="全部订单" @click="onOrderClick" />
      <van-grid-item icon="setting-o" text="退出登录" @click="onLogoutClick" />
      <van-grid-item icon="delete" text="注销商店" @click="onDeleteClick" />
    </van-grid>
  </div>
</template>

<script>
import { axios, API_URL } from "../../api"
import {
  Cell,
  CellGroup,
  Button,
  Field,
  Toast,
  Grid,
  GridItem,
  Dialog,
  Notify
} from "vant"

export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Field.name]: Field,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem
  },
  data() {
    return {
      shop_id: "",
      Discription: "abcd",
      name: "",
      address: "",
      info: "",
      phone: "",
      nameEditable: true,
      addressEditable: true,
      infoEditable: true,
      phoneEditable: true
    }
  },
  methods: {
    shopInfoChange() {
      axios
        .put(
          API_URL + "shop",
          {
            address: this.address,
            info: this.info,
            name: this.name,
            phone: this.phone
          },
          {
            headers: {
              authorization: this.$store.state.shop_token
            }
          }
        )
        .then(() => {
          Toast("商铺信息修改成功")
        })
        .catch(err => {
          console.error(err)
        })
    },
    nameEdit() {
      this.nameEditable = !this.nameEditable
      this.shopInfoChange()
    },
    addressEdit() {
      this.addressEditable = !this.addressEditable
      this.shopInfoChange()
    },
    infoEdit() {
      this.infoEditable = !this.infoEditable
      this.shopInfoChange()
    },
    phoneEdit() {
      this.phoneEditable = !this.phoneEditable
      this.shopInfoChange()
    },
    onShopClick() {
      this.$router.push({ name: "shop", params: { shop_id: this.shop_id } })
    },
    onOrderClick() {
      this.$router.push({
        name: "shopOrderList",
        params: { shop_id: this.shop_id }
      })
    },
    onDeleteClick() {
      Dialog.confirm({
        title: "注销店铺",
        message: "你确定要注销店铺吗？所有与店铺相关的商品、订单均会清除。"
      })
        .then(() => {
          axios
            .delete(API_URL + "shop", {
              shop_id: this.shop_id,
              headers: {
                authorization: this.$store.state.shop_token
              }
            })
            .then(() => {
              this.$store.commit("SHOP_LOGOUT")
              this.$router.push({ name: "home" })
            })
            .catch(err => {
              if (err.response.status == 401) {
                this.$router.push({ name: "shopLogin" })
              }
              console.error(err)
            })
        })
        .catch(() => {})
    },
    onLogoutClick() {
      Notify({ type: "primary", message: "已退出登录" })
      this.$store.commit("SHOP_LOGOUT")
      this.$router.push({ name: "home" })
    },
    update() {
      axios
        .get(API_URL + "shop", {
          headers: {
            authorization: this.$store.state.shop_token
          }
        })
        .then(response => {
          this.name = response.data.name
          this.address = response.data.address
          this.info = response.data.info
          this.phone = response.data.phone
          this.shop_id = response.data.shop_id
        })
        .catch(err => {
          if (err.response.status == 401) {
            this.$router.push({ name: "shopLogin" })
          }
          console.error(err)
        })
    }
  },
  mounted: function() {
    this.update()
  }
}
</script>
